<template>
<div class="nav_menu">
  <div class="logo_box">
    <i class="iconfont icon-zhongtong"></i> 管理员后台
  </div>
    <el-menu default-active="" class="nav-menu-vertical" @open="handleOpen" @close="handleClose" :unique-opened="true" background-color="#0a3866"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu :index="listKey.toString()" v-for="(list,listKey) in testmenuList">
        <template slot="title">
          <i class="iconfont" :class="list.iconstyle"></i>
          <span>{{list.name}}</span>
        </template>
        <el-menu-item-group>
            <router-link :to="child.path" v-for="child in list.list">
               <el-menu-item :index="child.path">{{child.name}}</el-menu-item>
            </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import _ from 'lodash'
import {menuList} from './nav-menu.js'
export default {
  data() {
    return {
      testmenuList:menuList,
		  selectMenu:'',
      menusArr:this.$store.getters.menuData
    }
  },
  methods:{
	  selectRouter (ele,event){
		  this.selectMenu = "";
		  let index = _.findIndex(this.$store.state.routerTabs.list , function(item){
			  return item.path === ele.path
		  });
		  if(index != -1){
			  this.$router.push(ele.path);
			  this.$store.state.routerTabs.selected = ele.path;
		  }else{
			  this.$store.state.routerTabs.list.push(ele);
			  this.$router.push(ele.path);
			  this.$store.state.routerTabs.selected = ele.path;
		  }
		  console.log(this.$store.state.routerTabs.selected);
	  },
	  menuMouseover(menu){
		  this.selectMenu = menu.name;
	  },
	  menuMouseout(){
		  this.selectMenu = "";
	  },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    get_menuList(){

    }
  },
  created(){
    // console.log("caidaishi:",this.$store.getters.menuData);
  }
};
</script>

<style scoped lang="scss">
@import "./nav-menu.scss";
</style>
